大家好~ 今天我們要來介紹jQuery~
jQuery 是 JavaScript 的函式庫,它簡化了許多在網頁開發中常見的事件,並提供了跨瀏覽器相容性,讓我們寫網頁變得更簡單快速。
以下為幾個常見的功能:
jQuery 讓DOM變得更好操作及監測。
例如 $(element) 和 .addClass()。
// 選取元素並添加類別
$("#myElement").addClass("highlight");
// 改變文字內容
$("#myElement").text("新的文字內容");
// 在元素中插入新的 HTML 內容
$("#myElement").html("<p>新的段落</p>");
// 獲取元素的屬性值
var href = $("#myLink").attr("href");
jQuery 讓事件處理變得更簡單。
例如 $(element).click()。
// 加入 click 事件監聽器
$("#myButton").click(function() {
alert("按鈕被點擊了!");
});
jQuery 在進行 AJAX 請求時,不需要重新載入整個頁面,可以從伺服器直接獲取資料。
// 發送 AJAX GET 請求
$.get("https://jsonplaceholder.typicode.com/posts", function(data) {
console.log(data);
});
jQuery 提供函式讓做動畫變得更簡單。
例如 .fadeIn()、.slideUp()。
// 淡入元素
$("#myElement").fadeIn();
// 切換元素可見狀態
$("#myElement").toggle();
jQuery 提供了許多內建函數,不用自己手刻。
例如 $.each()。
// 遍歷陣列
var myArray = [1, 2, 3, 4, 5];
$.each(myArray, function(index, value) {
console.log(index + ": " + value);
});
jQuery 有許多外掛及社群,可以用別人寫好的,省去不少麻煩。
jQuery 在每個瀏覽器保持一致,不會因為跨瀏覽器產生問題。
以上就是常見的jQuery常見功能
不過要記得在HTML 中引入 jQuery 函式庫才能正確執行這些範例。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
這代表從 jQuery 官方網站上載入最新版本的 jQuery
今天就介紹到這邊~ 我們明天見~